import React, { useState, useRef, useEffect } from 'react'
import { Search, Loading, Cell, Badge, Image } from 'react-vant';
import request from '../../../../utils/request';
import './index.less'
function Searchs(props) {
    //给input框添加ref拿到节点
    const inputFoucks = useRef(null)
    //设置加载动画
    const [load, setLoad] = useState(false)

    //进页面调用一次，使input框自动获取到焦点
    useEffect(() => {
        inputFoucks.current.focus()
    }, [])
    //搜索出来的用户
    const [usersDetail, setUserDetail] = useState([])
    const [messagesList, setMsgList] = useState([])
    const searchItem = (val) => {
        setLoad(true)
        setTimeout(() => {
            request.post('/JFChatMsg/getUserItem', { val: val.target.value }).then(res => {
                console.log(res.data);
                setUserDetail(res.data.firendsList)
                setMsgList(res.data.messages)
                setLoad(false)
            })
        }, 1000)
    }
    //后退
    const onCancel = () => props.history.go(-1);

    //跳转到聊天页面
    const jumpChatMsg = (item) => {
        console.log(item);
        props.history.push({
            pathname: '/main/chatPage',
            state: item
        })
    }



    return (
        <div className="searchBox">
            <Search showAction={true} onCancel={onCancel} ref={inputFoucks} onBlur={searchItem} placeholder="搜索" />
            {
                load ? <Loading style={{ textAligin: "center" }} size="24px">正在加载...</Loading> : null
            }
            {
                usersDetail.length || messagesList.length ? <div className="userList">
                    <div >
                        <p>联系人</p>
                        {
                            usersDetail.map((item, index) => {
                                return <div onClick={() => { jumpChatMsg(item) }} key={index}  >
                                    <img src="https://pic3.zhimg.com/80/v2-437f4dc41f0f972f31921a228641cf9e_720w.jpg?source=1940ef5c" alt="" />
                                    <p>{item.remark}</p>
                                </div>
                            })
                        }
                    </div>
                    <div className="userMessage">
                        <p>聊天记录</p>
                        {
                            messagesList.map((item, index) => {
                                return <div className="nicai" onClick={() => { jumpChatMsg(item) }} key={index}  >
                                    <Image radius="5" style={{ width: "40px", height: "40px", }} src="https://pic3.zhimg.com/80/v2-437f4dc41f0f972f31921a228641cf9e_720w.jpg?source=1940ef5c" alt="" />
                                    <Cell title={item.remark} label={item.msg} />
                                </div>
                            })
                        }
                    </div>

                </div> : <div className="content">
                        <div><p>搜索指定内容</p></div>
                        <div>
                            <ul>
                                <li>
                                    <p><span href="">朋友圈</span></p>
                                    <p>|</p>
                                </li>
                                <li>
                                    <p><span href="">文章</span></p>
                                    <p>|</p>
                                </li>
                                <li>
                                    <p><span href="">公众号</span></p>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <p><span href="">小程序</span></p>
                                    <p>|</p>
                                </li>
                                <li>
                                    <p><span href="">音乐</span></p>
                                    <p>|</p>
                                </li>
                                <li>
                                    <p><span href="">发表情</span></p>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <p><span href="">服务</span></p>
                                </li>
                            </ul>
                        </div>
                    </div>
            }



        </div>
    )
}

export default Searchs
